<template>
	<view class="container p30">
		<view class="nocontent"  v-if="!message_detail.content">
			暂无评论
		</view>
		<!-- ======================================买家评论====================================== -->
		<view class="comment" v-if="message_detail.content">
			<view class="avator">
				<image :src="message_detail.user.avatar" mode=""></image>
			</view>
			<view class="comment_msg">
				<view class="buyName">{{message_detail.user.username}}</view>
				<view class="comment_content">{{message_detail.content}}</view>
				<view class="time">{{message_detail.created_at}}</view>
				<!-- 商品信息 -->
				<view class="goods">
					<view class="good" v-show="message_detail.goods">
						<image 
							v-show="message_detail.goods.goods_images.length>0"
							:src="message_detail.goods.goods_images[0]" mode=""></image>
						<view class="goods_msg">
							<view class
							="goods_name">{{message_detail.goods.goods_name}}</view>
							<view class="goods_price">￥<text>{{message_detail.goods.goods_price}}</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view 
			v-if="message_detail.content && !message_detail.seller_content && type==2" 
			class="return_btn" @click="open_message">
			回复
		</view>
		<view 
			v-if="message_detail.content && message_detail.seller_content" 
			class="jiange">回复评论</view>
		<!-- ======================================卖家评论====================================== -->
		<!--   -->
		<view 
			v-if="message_detail.content && message_detail.seller_content"
			class="comment">
			<view class="avator">
				<image :src="message_detail.seller_user.avatar" mode=""></image>
			</view>
			<view class="comment_msg">
				<view class="buyName">{{message_detail.seller_user.username||''}}</view>
				<view class="comment_content">{{message_detail.seller_content||''}}</view>
				<view class="time">{{message_detail.seller_at||''}}</view>
			</view>
		</view>
		<!-- 回复留言 -->
		<u-popup
		  v-model="show_message_modal"
		  mode="bottom"
		  height="300rpx"
		  @close="close_message_modal"
		>
		  <view class="message-modal">
		    <view class="input">
		      <input
		        type="text"
		        placeholder="留下你的精彩留言吧"
		        v-model="message_send_text"
				@keyup.enter="send_message"
		      />
		      <image
		        src="https://community.chuangxiangdianli.com/images/neighborimg/market/liuyan_fabu.png"
		        mode=""
				@click="send_message"
		      ></image>
		    </view>
		  </view>
		</u-popup>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	export default {
		data(){
			return {
				// 订单id
				id:null,
				// 订单类型
				type:null,
				// 订单的评论
				message_detail:{},
				// 留言弹框的显示/隐藏
				show_message_modal: false,
				// 发布留言的内容
				message_send_text: "",
			}
		},
		onLoad(options) {
			this.id = options.id
			this.type = options.type
			this.get_message()
		},
		methods:{
			// 打开评论
			open_message(){
				this.show_message_modal = true
			},
			close_message_modal(){
				this.show_message_modal = false
			},
			// 获取订单评论
			get_message(){
				let that = this
				request.get('Mini/circle/flea/comment/'+that.id,{
					id:that.id
				}).then(res=>{
					// console.log(res)
					if(res.code == 200){
						that.message_detail = res.data
					}
				})
			},
			// 商家回复评论
			 send_message(){
				let that = this
				request.post({
					url:'Mini/circle/flea/replyOrderComment',
					data:{
						order_id:that.id,
						content:that.message_send_text
					}
				}).then(res=>{
					if(res.code == 200){
						that.message_send_text = ''
						that.show_message_modal = false
						this.get_message()
					}
				})
			 }
		}
	}
</script>

<style lang="scss" scoped>
	.nocontent{
		width: 100%;
		margin-top: 20rpx;
		padding-left: 30rpx;
	}
	.comment{
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		.avator{
			height: 68rpx;
			width: 68rpx;
			&>image{
				display: block;
				height: 100%;
				width: 100%;
			}
		}
		.comment_msg{
			flex: 1;
			margin-left: 30rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			.buyName{
				margin: 11rpx 0 50rpx;
			}
			.comment_content{
				color: #333333;
			}
			.time{
				margin-bottom: 39rpx;
				margin-top: 55rpx;
			}
			.goods{
				width: 100%;
				padding: 24rpx 0;
				box-sizing: border-box;
				border-bottom: 1rpx solid rgba(220, 220, 220, 1);
				.good{
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					&>image{
						display: block;
						height: 100rpx;
						width: 100rpx;
					}
					.goods_msg{
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin: 0 34rpx;
						font-size: 26rpx;
						font-family: Hiragino Sans GB;
						font-weight: normal;
						color: #333333;
						.goods_price{
							color: #B83D42;
						}
					}
					.goods_call{
						font-size: 26rpx;
						font-family: Hiragino Sans GB;
						font-weight: normal;
						color: #4BA7E9;
					}
				}
			}
		}
	}
	.return_btn{
		width: 100%;
		box-sizing: border-box;
		text-align: right;
		margin-top: 20rpx;
	}
	.jiange{
		padding: 45rpx 0;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.message-modal {
	  width: 100%;
	  height: 100%;
	  box-sizing: border-box;
	  padding-bottom: 2rpx;
	  display: flex;
	  align-items: flex-end;
	  .input {
	    width: 100%;
	    height: 76rpx;
	    background: #ffffff;
	    box-shadow: 0px 0px 13rpx 0px rgba(164, 164, 164, 0.17);
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    box-sizing: border-box;
	    padding: 0 24rpx;
	    input {
	      width: 670rpx;
	      height: 100%;
	    }
	    image {
	      width: 54rpx;
	      height: 54rpx;
	    }
	  }
	}
</style>
